<template>
  <div class="supercdr">
    <div class="supercdr_main">
      <div style="display:flex;justify-content: space-between;align-items: center;">
        <h2>
          京粉客采集大量超市售卖图,致力为京粉服务!
        </h2>
        <el-input
          style="width:300px"
          placeholder="请输入关键字进行搜索"
          suffix-icon="el-icon-search"
          v-model="search"
          clearable
          @change="dosearch"
        >
        </el-input>
      </div>
      <el-row :gutter="24" v-loading="loading">
        <el-col :span="6" v-for="(item, index) in supercdrList" :key="index" style="padding:10px">
          <el-card :body-style="{ padding: '10px' }">
            <div class="supercdr_box" @click="disabled=true" @mouseenter="disabled=false">
              <el-popover
                placement="right"
                trigger="hover"
                :disabled="disabled">
                <img :src="item.url" style="width:400px" alt="">
                <el-image
                  slot="reference"
                  class="elimg2"
                  style="width:280px;height:270px"
                  fit
                  :src="item.url"
                  lazy
                  :preview-src-list="urlList"
                >
                  <div slot="placeholder" class="image-slot">
                    <Goodsloading></Goodsloading>
                  </div>
                </el-image>
              </el-popover>
              <p>{{ item.title }}</p>
              <i class="el-icon-download" @click="downs(item.url,item.title)"></i>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div style="width:100%;margin:10px auto;">
        <!-- 分页器 -->
        <!-- @size-change="handleSizeChange" -->
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          background
          :page-size="50"
          :pager-count="11"
          layout="total, prev, pager, next, jumper"
          :total="count">
        </el-pagination>
      </div>
    </div>
    <footerbox></footerbox>
  </div>
</template>

<script>
  import footerbox from '@/components/footerbox.vue'
  import Goodsloading from '@/components/Goodsloading.vue'

  import {
    getSourceList
  } from '@/api/business'
  export default {
    name: 'Supercdr',
    components: {
      footerbox,
      Goodsloading
    },
    data() {
      return {
        disabled:false,
        loading:false,
        supercdrList: [],
        urlList: [],
        currentPage: 1,
        count: 0,
        search:''
      }
    },

    computed: {},
    created() {
      this.getSourceList(1,50)
    },
    mounted() {},
    methods: {
      dosearch(){
        this.getSourceList(1,50,this.search)
      },
      //下载图片
      downs(imgsrc, name) {
        var image = new Image()
        // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous')
        image.src = imgsrc
        image.onload = function () {
          var canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          var context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          var url = canvas.toDataURL('image/png') //得到图片的base64编码数据

          var a = document.createElement('a') // 生成一个a元素
          var event = new MouseEvent('click') // 创建一个单击事件
          a.download = name || '素材' // 设置图片名称
          a.href = url // 将生成的URL设置为a.href属性
          a.dispatchEvent(event) // 触发a的单击事件
        }
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`)
        this.currentPage = val
        //   this.searchform.page = val;
        this.getSourceList(val,50,this.search)
      },
      //获取超市素材
      getSourceList(page,pagesize, search) {
        this.loading=true
        getSourceList({
            page: page,
            pagesize: pagesize,
            search: search
          })
          .then(res => {
            if (res.code == 200) {
              // console.log('素材返回', res)
              this.count = res.data.count
              this.supercdrList = res.data.data
              if(res.data.data.length==0){
                this.$message.info('对不起,当前暂无售卖图,请稍后再试!')
              }
              this.urlList = []
              for (const i in res.data.data) {
                this.urlList.push(res.data.data[i].url)
              }
              this.loading=false
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .supercdr {
    position: relative;

    .supercdr_main {
      width: 1280px;
      // min-height: 700px;
      margin: 0 auto;

      h2 {
        font-weight: bold;
        color: orangered;
        padding: 10px 0;
      }
      /deep/.el-card{
        border-radius:  8px;
        overflow: hidden;
        .el-card__body{
          border-radius:  8px;
          border: 1px solid transparent;
      }
      }
        /deep/.el-card__body:hover{
          border: 1px solid blue;
        }
      .supercdr_box {
        /deep/.el-icon-download {
          font-size: 22px;
          font-weight: bold;
          color: #000;
          cursor: pointer;
        }
      }
    }
  }
</style>